<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echarts/echarts.min.js"></script>
</head>

<body>
  <div id="main" style="width: 500;height:900px;"></div>
  <script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('#main'));

    // 指定图表的配置项和数据
    const option = {
  title: [
      {
      text: '男女薪资分布',
      left: 'left',
      textStyle: {
        fontSize: 30
      }
    },
    {
      text: '男生',
      top: '45%',
      left: 'center'
    },
    {
      text: '女生',
      top: '80%',
      left: 'center'
    },
  ],
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['21%', '28%'],
      left: 'center',
      top:  -350,
      width: 800,
      data: [
        { value: 230, name: '1万以下' },
        { value: 910, name: '1-1.5万' },
        {value: 600, name: '11.5-2万' },
        { value: 800, name: '2万以上' },
      ]
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['21%', '28%'],
      left: 'center',
      top:  200,
      width: 800,
      data: [
        { value: 230, name: '1万以下' },
        { value: 910, name: '1-1.5万' },
        {value: 600, name: '11.5-2万' },
        { value: 800, name: '2万以上' },
      ]
    },
  ],
  color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a']
};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>